<nz-alert nzBanner nzMessage="You are currently offline" *ngIf="!websocketConnect" nzType="error"></nz-alert>
<div class="head">

  <nz-input-group nzSearch nzSize="large" class="input-group" [nzAddOnAfter]="suffixIconButton">
    <input type="text" nz-input placeholder="Search cogito" [ngModel]="searchValue" (ngModelChange)="setSearchToStore($event)" class="input" #searchInput />

  </nz-input-group>
  <app-toolbox class="toolbox"></app-toolbox>
</div>
<ng-template #suffixIconButton>
  <button nz-button nzType="primary" [disabled]="searchValue === ''" (click)="setSearchToStore('')" nzSearch><span nz-icon nzType="close"></span></button>
</ng-template>
<!--TODO make a component-->
<div class="batch-action-wrapper" *ngIf="selectedElement.size !== 0">
  <div class="batch-action">
    <button nz-button nz-dropdown nzTrigger="click" [nzDropdownMenu]="menu">Add Tags</button>
    <button nz-button (click)="removeAll()">Remove</button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <nz-input-group [nzSuffix]="suffixIconSearch">
        <input type="text" nz-input placeholder="enter tag" [(ngModel)]="tagValue" />
      </nz-input-group>
      <ng-template #suffixIconSearch>
        <button nz-icon nzType="tag" nzTheme="twotone" [disabled]="tagValue === ''" (click)="addtagsToAll()"></button>
      </ng-template>
    </nz-dropdown-menu>
  </div>
</div>


<div class="container" appIntersectionObserverGrid>

  <app-markdown-card [cardMode]="true" [readonly]="false" class="first-child-container"></app-markdown-card>
  <ng-container *ngFor="let card of filteredResult; trackBy: trackByFn">
    <div class="active-element" appIntersectionObserverElement
         [ngClass]="{'selected-element': isSelectedElement(card.id) ? 'red': ''}"
         #intersection="intersection" (click)="toggleSelected(card.id, $event)"
         [ngSwitch]="intersection.isIntersecting">
      <ng-container *ngSwitchCase="intersection.IS_INTERSECTING">
        <app-card *ngIf="intersection.isIntersecting" [card]="card"></app-card>
      </ng-container>
    </div>


  </ng-container>

</div>


